<template>
	<a-modal
		:open="open"
		title=""
		:closable="false"
		:maskClosable="false"
		:keyboard="false"
		:footer="null"
		:width="480"
		:centered="true"
		class="login-expired-modal"
		@cancel="handleCancel"
	>
		<div class="modal-content">
			<div class="background-decoration">
				<div class="circle circle-1"></div>
				<div class="circle circle-2"></div>
				<div class="circle circle-3"></div>
			</div>

			<div class="main-content">
				<div class="icon-section">
					<div class="expired-icon">
						<div class="icon-wrapper">
							<ExclamationCircleOutlined />
						</div>
						<div class="pulse-ring"></div>
					</div>
				</div>

				<div class="content-section">
					<h3 class="title">需要登录</h3>
					<p class="description">
						您的登录状态已失效，需要重新验证身份
						<br />
						<span class="sub-text">为了保护您的账户安全</span>
					</p>
				</div>

				<div class="action-section">
					<a-button type="primary" size="large" block @click="handleReLogin" :loading="loading" class="login-btn">
						<template #icon>
							<UserOutlined v-if="!loading" />
						</template>
						重新登录
					</a-button>
					<a-button type="text" size="small" @click="handleCancel" class="cancel-btn" :disabled="loading">
						稍后处理
					</a-button>
				</div>
			</div>
		</div>
	</a-modal>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ExclamationCircleOutlined, UserOutlined } from '@ant-design/icons-vue'
import { useRouter } from 'vue-router'

interface Props {
	open: boolean
	redirectUrl?: string
}

interface Emits {
	(e: 'update:open', value: boolean): void
	(e: 'cancel'): void
}

const props = withDefaults(defineProps<Props>(), {
	redirectUrl: '',
})

const emit = defineEmits<Emits>()
const router = useRouter()
const loading = ref(false)

// 处理重新登录
const handleReLogin = async () => {
	loading.value = true
	try {
		// 构建登录跳转URL，避免重复拼接
		const currentUrl = window.location.href
		const redirectUrl = props.redirectUrl || currentUrl

		// 确保redirectUrl不包含完整的URL，避免重复拼接
		let finalRedirectUrl = redirectUrl
		if (redirectUrl.startsWith('http://') || redirectUrl.startsWith('https://')) {
			try {
				const url = new URL(redirectUrl)
				finalRedirectUrl = url.pathname + url.search + url.hash
			} catch {
				finalRedirectUrl = '/'
			}
		}

		// 确保路径正确格式
		if (!finalRedirectUrl.startsWith('/')) {
			finalRedirectUrl = '/' + finalRedirectUrl
		}

		// 跳转到登录页面
		await router.push({
			path: '/user/login',
			query: {
				redirect: finalRedirectUrl,
			},
		})

		emit('update:open', false)
	} catch (error) {
		console.error('跳转登录页面失败:', error)
	} finally {
		loading.value = false
	}
}

// 处理取消
const handleCancel = () => {
	// 跳转到首页，确保用户在公开页面
	router
		.push('/')
		.then(() => {
			emit('cancel')
			emit('update:open', false)
		})
		.catch(() => {
			// 如果路由跳转失败，仍然关闭弹窗
			emit('cancel')
			emit('update:open', false)
		})
}
</script>

<style scoped lang="scss">
.login-expired-modal {
	:deep(.ant-modal-body) {
		padding: 0;
		overflow: hidden;
	}

	:deep(.ant-modal-content) {
		border-radius: 20px;
		overflow: hidden;
		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
		border: 1px solid rgba(255, 255, 255, 0.2);
	}

	:deep(.ant-modal-mask) {
		backdrop-filter: blur(8px);
		background: rgba(0, 0, 0, 0.6);
	}
}

.modal-content {
	position: relative;
	padding: 48px 36px 36px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	overflow: hidden;
	min-height: 320px;

	.background-decoration {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;

		.circle {
			position: absolute;
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.1);
			animation: float 6s ease-in-out infinite;

			&.circle-1 {
				width: 120px;
				height: 120px;
				top: -60px;
				right: -60px;
				animation-delay: 0s;
			}

			&.circle-2 {
				width: 80px;
				height: 80px;
				bottom: -40px;
				left: -40px;
				animation-delay: 2s;
			}

			&.circle-3 {
				width: 60px;
				height: 60px;
				top: 50%;
				left: -30px;
				animation-delay: 4s;
			}
		}
	}

	.main-content {
		position: relative;
		z-index: 2;
		text-align: center;
	}

	.icon-section {
		margin-bottom: 32px;
		position: relative;

		.expired-icon {
			position: relative;
			display: inline-block;

			.icon-wrapper {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				width: 80px;
				height: 80px;
				border-radius: 50%;
				background: rgba(255, 255, 255, 0.15);
				backdrop-filter: blur(10px);
				border: 2px solid rgba(255, 255, 255, 0.2);
				font-size: 36px;
				color: #ffd700;
				position: relative;
				z-index: 2;
			}

			.pulse-ring {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 80px;
				height: 80px;
				border: 3px solid rgba(255, 215, 0, 0.3);
				border-radius: 50%;
				animation: pulse 2s infinite;
			}
		}
	}

	.content-section {
		margin-bottom: 40px;

		.title {
			margin: 0 0 16px 0;
			font-size: 28px;
			font-weight: 700;
			color: white;
			text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
			letter-spacing: -0.5px;
		}

		.description {
			margin: 0;
			font-size: 16px;
			color: rgba(255, 255, 255, 0.9);
			line-height: 1.6;

			.sub-text {
				display: block;
				font-size: 14px;
				color: rgba(255, 255, 255, 0.7);
				margin-top: 8px;
				font-style: italic;
			}
		}
	}

	.action-section {
		.login-btn {
			height: 48px;
			border-radius: 12px;
			font-size: 16px;
			font-weight: 600;
			background: rgba(255, 255, 255, 0.95);
			border: none;
			color: #4c1d95;
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
			transition: all 0.3s ease;

			&:hover:not(:disabled) {
				background: white;
				transform: translateY(-2px);
				box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
			}

			&:active {
				transform: translateY(0);
			}
		}

		.cancel-btn {
			margin-top: 16px;
			color: rgba(255, 255, 255, 0.8);
			font-size: 14px;

			&:hover:not(:disabled) {
				color: white;
				background: rgba(255, 255, 255, 0.1);
			}
		}
	}
}

@keyframes float {
	0%,
	100% {
		transform: translateY(0) rotate(0deg);
		opacity: 0.5;
	}
	50% {
		transform: translateY(-20px) rotate(180deg);
		opacity: 0.8;
	}
}

@keyframes pulse {
	0% {
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;
	}
	100% {
		transform: translate(-50%, -50%) scale(1.5);
		opacity: 0;
	}
}

// 入场动画
:deep(.ant-modal) {
	.ant-modal-content {
		animation: modalSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
	}
}

@keyframes modalSlideIn {
	from {
		transform: scale(0.7) translateY(-50px);
		opacity: 0;
	}
	to {
		transform: scale(1) translateY(0);
		opacity: 1;
	}
}

// 响应式适配
@media (max-width: 640px) {
	.modal-content {
		padding: 36px 24px 24px;
		min-height: 280px;

		.icon-section {
			margin-bottom: 24px;

			.expired-icon .icon-wrapper {
				width: 64px;
				height: 64px;
				font-size: 28px;
			}
		}

		.content-section {
			margin-bottom: 32px;

			.title {
				font-size: 24px;
			}

			.description {
				font-size: 15px;
			}
		}

		.action-section .login-btn {
			height: 44px;
			font-size: 15px;
		}
	}
}
</style>
